<div class="dialog-content-wrapper">
    <mat-toolbar matDialogTitle class="mat-accent m-0">
        <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
            <span class="title dialog-title">{{dialogTitle}}</span>
            <button mat-icon-button (click)="matDialogRef.close()" aria-label="Close dialog">
                <mat-icon>close</mat-icon>
            </button>
        </mat-toolbar-row>

        <mat-toolbar-row class="toolbar-bottom py-16" fxLayout="column" fxLayoutAlign="center center">
            <img [src]="contact.avatar" class="avatar contact-avatar huge m-0"
                 [alt]="contact.name"/>
            <div class="contact-name mt-8">{{contact.name}} {{contact.lastName}}</div>
        </mat-toolbar-row>
    </mat-toolbar>

    <div mat-dialog-content class="p-24 pb-0 m-0" fusePerfectScrollbar>

        <form [formGroup]="contactForm">

            <div fxLayout="row" fxLayoutAlign="start start">
                <mat-form-field appearance="outline" fxFlex>
                    <mat-label>Name</mat-label>
                    <mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
                    <input name="name" formControlName="name" matInput required>
                </mat-form-field>
            </div>

            <div fxLayout="row" fxLayoutAlign="start start">
                <mat-form-field appearance="outline" fxFlex>
                    <mat-label>Lastname</mat-label>
                    <mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
                    <input name="lastName" formControlName="lastName" matInput>
                </mat-form-field>
            </div>

            <div fxLayout="row" fxLayoutAlign="start start">
                <mat-form-field appearance="outline" fxFlex>
                    <mat-label>Nickname</mat-label>
                    <mat-icon matSuffix class="secondary-text">star</mat-icon>
                    <input name="nickname" formControlName="nickname" matInput>
                </mat-form-field>
            </div>

            <div fxLayout="row" fxLayoutAlign="start start">
                <mat-form-field appearance="outline" fxFlex>
                    <mat-label>Phone number</mat-label>
                    <mat-icon matSuffix class="secondary-text">phone</mat-icon>
                    <input formControlName="phone" matInput>
                </mat-form-field>
            </div>

            <div fxLayout="row" fxLayoutAlign="start start">
                <mat-form-field appearance="outline" fxFlex>
                    <mat-label>Email</mat-label>
                    <mat-icon matSuffix class="secondary-text">email</mat-icon>
                    <input name="email" formControlName="email" matInput type="email">
                </mat-form-field>
            </div>

            <div fxLayout="row" fxLayoutAlign="start start">
                <mat-form-field appearance="outline" fxFlex>
                    <mat-label>Company</mat-label>
                    <mat-icon matSuffix class="secondary-text">domain</mat-icon>
                    <input name="company" formControlName="company" matInput>
                </mat-form-field>
            </div>

            <div fxLayout="row" fxLayoutAlign="start start">
                <mat-form-field appearance="outline" fxFlex>
                    <mat-label>Job title</mat-label>
                    <mat-icon matSuffix class="secondary-text">work</mat-icon>
                    <input name="jobTitle" formControlName="jobTitle" matInput>
                </mat-form-field>
            </div>

            <div fxLayout="row" fxLayoutAlign="start start">
                <mat-form-field appearance="outline" fxFlex>
                    <mat-label>Birthday</mat-label>
                    <input matInput [matDatepicker]="birthdayDatePicker" name="birthday" formControlName="birthday">
                    <mat-datepicker-toggle matSuffix [for]="birthdayDatePicker"></mat-datepicker-toggle>
                    <mat-datepicker #birthdayDatePicker></mat-datepicker>
                </mat-form-field>
            </div>

            <div fxLayout="row" fxLayoutAlign="start start">
                <mat-form-field appearance="outline" fxFlex>
                    <mat-label>Address</mat-label>
                    <mat-icon matSuffix class="secondary-text">home</mat-icon>
                    <input name="address" formControlName="address" matInput>
                </mat-form-field>
            </div>

            <div fxLayout="row" class="textarea-wrapper" fxLayoutAlign="start start">
                <mat-form-field appearance="outline" fxFlex>
                    <mat-label>Notes</mat-label>
                    <textarea name="notes" formControlName="notes" matInput type="text" max-rows="4"></textarea>
                </mat-form-field>
            </div>

        </form>

    </div>

    <div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="end center">

        <button *ngIf="action === 'edit'"
                mat-button
                class="mr-8"
                (click)="matDialogRef.close(['delete',contactForm])"
                aria-label="Delete"
                matTooltip="Delete">
            DELETE
        </button>

        <button *ngIf="action !== 'edit'"
                mat-button
                class="save-button"
                (click)="matDialogRef.close(contactForm)"
                [disabled]="contactForm.invalid"
                aria-label="SAVE">
            ADD
        </button>

        <button *ngIf="action === 'edit'"
                mat-button
                class="save-button"
                (click)="matDialogRef.close(['save',contactForm])"
                [disabled]="contactForm.invalid"
                aria-label="SAVE">
            SAVE
        </button>

    </div>
</div>
